<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" type="text/css" href="../../../css/mui.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/swiper-4.3.5.min.css" />
	<link rel="stylesheet" type="text/css" href="../../../css/pages/activity.css" />
</head>

<body>
	<div class="loading-warpper" id="loading">
		<div class="loading">
			<div class="item1"></div>
			<div class="item2"></div>
		</div>
	</div>
	<div id="app" class="content">
		<div v-if="detailData.isParticipate == 1" class="already-join">已参加过该活动</div>
		<div class="wapper">
			<div class="swiper">
				<div class="swiper-container">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="(item,index) in detailData.actImgList">
							<img class="swiper-img" :src="item.filesPath" />
						</div>
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
			</div>
			<div class="Centered">
				<div class="title m-t-15" v-text="detailData.actTitle"></div>
				<div class="font-12 font-c-7f" v-text="detailData.actParticipateNumber + '人参加'"></div>
			</div>
			<div class="details font-c-41 font-14" v-text="detailData.actdDetails"></div>
			<div class="author font-c-41 font-14">一 {{detailData.actLinkman}}</div>
			<div v-if="detailData.actStatus == 1 && detailData.isParticipate == 0" class="btn btn-color1" @click="ParticipateActivity(detailData.actID)">
				<span>立即参加</span>
			</div>
			<div v-if="detailData.actStatus == 2 && detailData.isParticipate == 0" class="btn btn-color2">
				<span>进行中</span>
			</div>
			<div v-if="detailData.actStatus == 3" class="btn btn-color3">
				<span>已结束</span>
			</div>
			<div v-if="detailData.isParticipate == 1 && detailData.actStatus != 3" class="ipone" @click="backIpone">
				<img src="../images/details/ipone.png">
			</div>
		</div>

		<div class="desc">
			<div class="desc-title p-b-10 font-14 font-c-41 m-b-15">活动详情</div>
			<div class="item font-14 font-c-7f m-b-10">
				<img class="icon" src="../images/details/jiezhi.png">
				<span class="text">开始时间：{{detailData.actStartTime}}</span>
			</div>
			<div class="item font-14 font-c-7f m-b-10">
				<img class="icon" src="../images/details/jiezhi.png">
				<span class="text">结束时间：{{detailData.actEndTime}}</span>
			</div>
			<div class="item font-14 font-c-7f m-b-10">
				<img class="icon" src="../images/details/dizhi.png">
				<span class="text">地点：{{detailData.actLocation}}</span>
			</div>
			<div class="item font-14 font-c-7f m-b-10">
				<img class="icon" src="../images/details/renshu.png">
				<span class="text">参加人数：{{detailData.actNumberOfPeople == 0 ? '不限人数' : detailData.actNumberOfPeople + '人' }}</span>
			</div>
			<div class="item font-14 font-c-7f m-b-10">
				<img class="icon" src="../images/details/lainxi.png">
				<span class="text">联系人：{{detailData.actLinkman}}</span>
			</div>
		</div>
	</div>
	<script src="../../../js/Width.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/swiper-4.3.5.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../js/Util.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
	<script type="text/javascript">
		mui.init()
		mui.plusReady(function () {
			if (!mui.os.android) {
				FastClick.attach(document.body);
			}
			var actID = plus.webview.currentWebview().actID;
			GetActivityDetails(actID)
		})

		var mySwiper
		var app = new Vue({
			el: "#app",
			data: {
				detailData: {}
			},
			methods: {
// 				getItemImgClick: function (data,num) {
// 					 plus.nativeUI.previewImage(data, { current: num })
// 					console.log(num)
// 				},
				ParticipateActivity: function (id) {
					var that = this;
					plus.nativeUI.confirm("您确定要参加活动吗？", function (e) {
						if (e.index == 0) {
							that.postActivty(id)
						}
					})
				},
				postActivty: function (id) {
					var that = this;
					mui.post(Util.HTTP + 'api/Activity/ParticipateActivity', {
						actID: id,
						userID: Util.getState('$state').userID
					}, function (res) {
						if (res.code == 1001) {
							mui.alert('参加成功', function () {
								mui.openWindow({
									url: 'succeed.html',
									id: 'succeed.html',
									styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
										titleNView: { // 窗口的标题栏控件
											titleText: " ", // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
											titleSize: "17px", // 字体大小,默认17px
											backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
											autoBackButton: true
										}
									}
								})
							})
						} else {
							mui.toast(res.message)
						}
					})
				},
				backIpone: function () {
					var actContact = this.detailData.actContact
					var actLinkman = this.detailData.actLinkman
					plus.nativeUI.confirm("您要给" + actLinkman + "打电话吗？", function (e) {
						if (e.index == 0) {
							plus.device.dial(actContact, false);
						}
					})
				}
			},
		})



		function GetActivityDetails(id) {
			mui.post(Util.HTTP + 'api/Activity/GetActivityDetails', {
				actID: id,
				userID: Util.getState('$state').userID
			}, function (res) {
				if (res.code == 1001) {
					app.detailData = res.data
					app.$nextTick(function () {
						mySwiper = new Swiper('.swiper-container', {
							loop: true,
							preventClicks: false, //默认true
							autoplay: {
								delay: 3000,
							}, //等同于以下设置
							// 如果需要分页器
							pagination: {
								el: '.swiper-pagination',
							}
						})
					})
					document.getElementById('loading').style.display = 'none'
				} else {
					mui.toast(res.message)
				}
			})
		}
	</script>
</body>

</html>
